<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form method="post" enctype="multipart/form-data" id="upload">
        <input id="uploads" type="file" name="file[]" multiple /><br>
      <input id="send" type="submit">
      <a href="#" onclick="add();">add();</a>
    </form>
    <div id="status">
      <table width="100%">
        <tr><th></th><th>загрузка</th><th>осталось</th><th>всего</th></tr>
        <tr><td>время:</td><td id="elapsed">∞</td><td id="remaining">∞</td><td id="total">∞</td></tr>
        <tr><td>размер:</td><td id="sent">0 b</td><td id="offset">0 b</td><td id="length">0 b</td></tr>
        <tr><td>скорость:</td><td id="speed">n/a</td></tr>
      </table>
      <div style="border: 1px solid #c0c0c0;">
        <div style="background: #c0c0c0; width: 0%; text-align: right;" id="bar">0%</div>
      </div>
      <a href="#" onclick="if (confirm('Вы точно хотите отменить загрузку?')) window.location = '/'" id="cancel">cancel_upload();</a>
    </div>
	<script type="text/javascript" src="/media/js/jquery-1.8.2.min.js"></script>
    <script  type="text/javascript">
(function($) {
$.fn.serializefiles = function() {
    var obj = $(this);
    /* ADD FILE TO PARAM AJAX */
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function(i, tag) {
        $.each($(tag)[0].files, function(i, file) {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};
})(jQuery);




      function fetch(id) {
        var fetch = new XMLHttpRequest();
        fetch.open('GET', '/nginx/progress', 1);
        fetch.setRequestHeader('X-Progress-ID', id);
        fetch.onreadystatechange = function () {
          if (fetch.readyState == 4) {
            if (fetch.status == 200) {
              //var now = new Date().getTime() / 1000;
              var upload = eval(fetch.responseText);
              if (upload.state == 'uploading') {
                var rate = upload.received / upload.size;
                var percent = Math.round(100*rate) + '%';
                $('#bar').html(percent);
                $('#bar').width(percent);
              }
              else {
                window.clearTimeout(interval);
              }
            }
          }
        }
        fetch.send(null);
      }

	function upload() {		var id = '';
		for (i = 0; i < 32; i++) {
			id += Math.floor(Math.random() * 16).toString(16);
		}
/*
		$.ajax({
			url: '/nginx/uploads?X-Progress-ID='+id,  //server script to process data
			type: 'POST',
			//xhr: $.ajaxSettings.xhr(),
			data: $("#upload").serializefiles(),
			cache: false,
			contentType: false,
			processData: false
		});
*/
		var xhr = new XMLHttpRequest();
		xhr.open('POST', '/nginx/uploads');
		xhr.setRequestHeader('X-Progress-ID', id)
		xhr.setRequestHeader('Content-Type','multipart/form-data');
		xhr.upload;
		xhr.send($('#upload').serializefiles());
		var interval = window.setInterval(fetch(id), 1000);
	}


!function ($) {
	$(function() {
		$('#send').click(function(){			upload();			//$('#upload').submit();
			return false;
		});
	});
}(window.jQuery)
    </script>
  </body>
</html>